<template>
  <div class="dashboard-container">
    <div class="header">
      <div class="user-info">
        <el-avatar :src="user.avatar" size="large" />
        <span class="user-name">{{ user.name }}</span>
      </div>
      <div class="header-actions">
        <el-button icon="el-icon-s-tools" circle></el-button>
        <!-- 可以在这里添加更多操作按钮 -->
      </div>
    </div>

    <div class="main-content">
      <el-row :gutter="20">
        <!-- 设备状态部分 -->
        <el-col :span="24" class="column-spacing">
          <div class="stat-card">
            <div class="stat-header">
              <h1>设备状态</h1>
            </div>
            <el-divider></el-divider>
            <div class="stat-body">
              <el-row :gutter="10">
                <el-col :span="8">
                  <div class="stat-item">
                    <div class="info-label">运行</div>
                    <div class="info-value"><countTo :startVal="0" :endVal="2012" :duration="3000" /></div>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div class="stat-item">
                    <div class="info-label">待机</div>
                    <div class="info-value"><countTo :startVal="0" :endVal="1202" :duration="3000" /></div>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div class="stat-item">
                    <div class="info-label">故障</div>
                    <div class="info-value"><countTo :startVal="0" :endVal="520" :duration="3000" /></div>
                  </div>
                </el-col>
              </el-row>
            </div>
          </div>
        </el-col>

        <!-- 生产目标部分 -->
        <el-col :span="24" class="column-spacing">
          <div class="goal-card">
            <el-card>
              <div class="card-header">生产目标</div>
              <el-progress :percentage="86"></el-progress>
              <div class="info-value">今日预计: <countTo :startVal="0" :endVal="3000" :duration="3000" /> 件</div>
              <div class="info-value">已完成: <countTo :startVal="0" :endVal="2000" :duration="3000" /> 件</div>
            </el-card>
          </div>
        </el-col>

        <!-- 生产趋势图表部分 -->
        <el-col :span="24" class="column-spacing">
          <div class="chart-card">
            <el-card>
              <div ref="chartContainer" class="chart-container"></div>
            </el-card>
          </div>
        </el-col>
        <el-col :span="24" class="column-spacing">
          <div class="center-content">
            <h3>当前手机端内容不完善，请在电脑上打开！</h3>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup>
import { CountTo } from 'vue3-count-to'
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'
import 'element-plus/es/components/icon/style/css'
const user = ref({
  name: '信号差',
  avatar: 'https://resourcesza.oss-cn-guangzhou.aliyuncs.com/portraits/2022082717582987.jpg'
})
const events = ref([
  { timestamp: '2023-07-20', title: '异常1', detail: '服务器宕机', icon: 'CircleCheck', color: '#CFD3DC' },
  { timestamp: '2023-07-21', title: '异常2', detail: '数据库连接失败', icon: 'WarningFilled', color: '#424243' },
  { timestamp: '2023-07-22', title: '异常3', detail: '内存泄漏', icon: 'CircleCloseFilled', color: '#2B2B2C' }
])

const displayedEvents = ref(events.value.slice())

const chartContainer = ref(null)

onMounted(() => {
  const chart = echarts.init(chartContainer.value)
  chart.setOption({
    title: {
      text: '生产趋势'
    },
    tooltip: {},
    xAxis: {
      data: ['一月', '二月', '三月', '四月', '五月', '六月']
    },
    yAxis: {},
    series: [
      {
        name: '生产量',
        type: 'line',
        data: [820, 932, 901, 934, 1290, 1330]
      }
    ]
  })
})
</script>

<style scoped>
.dashboard-container {
  padding: 20px;
  background-color: #f0f4f7;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  background-color: #6d6e6e;
  padding: 10px;
  border-radius: 8px;
}

.user-info {
  display: flex;
  align-items: center;
}

.user-name {
  margin-left: 10px;
  font-size: 18px;
  font-weight: bold;
  color: #ffffff;
}

.header-actions el-button {
  margin-left: 10px;
}

.stat-card {
  padding: 20px;
  background-color: #4eb9e6;
  color: #ffffff;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.stat-header h1 {
  font-size: 36px;
  margin: 0;
}

.stat-body {
  margin-top: 10px;
}

.stat-item {
  font-size: 16px;
}

.column-spacing {
  margin-bottom: 20px;
}

.goal-card .el-card,
.chart-card .el-card {
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.el-card {
  background-color: #ffffff;
  color: #333;
}

.card-header {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
}

.info-value {
  margin-top: 10px; /* 增加上下间距 */
  margin-bottom: 10px; /* 增加上下间距 */
}

.chart-container {
  width: 100%;
  height: 300px;
}
.center-content {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  height: 100%; /* 确保 div 的高度适应其父元素 */
}
</style>
